<template>
    <div id="app"  v-loading="loading">
        <div class="title">仲裁维权</div>
        
        <el-row class="tableBtnTop">
            <el-select 
                v-model="searchType"
                placeholder="请选择" class="filter"
            >
                <el-option
                    v-for="(typeItem,typeIndex) of searchTypeList"
                    :key="typeItem.value"
                    :value="typeItem.value"
                    :label="typeItem.name"
                ></el-option>
            </el-select>
            <div class="search">
                <el-input placeholder="请输入内容"
                    v-model="searchText"
                    @keyup.enter.native="searchWill"
                >
                    <i slot="prefix" class="el-input__icon el-icon-search"
                    >
                    </i>
                </el-input>
            </div>
            <el-button
                @click="startMoreHandle"
            >
                批量处理
            </el-button>
        </el-row>
        <el-table :data="tableData" border
            @filter-change="handleFilter"
            @selection-change="handleSelectionChange"
            ref="filterTable"
        >
            <el-table-column
                type="selection"
                width="55"
            >
            </el-table-column>
            <el-table-column prop="user" label="举报人" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <div class="userHead"
                        @click="$router.push(`/user/detail/${scope.row.publish_user_id}`)"
                    >
                        <img :src="scope.row.publish_user_avatar" class="square" />
                        {{
                            scope.row.publish_user_name
                        }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="user" label="被举报人" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <div class="userHead"
                        @click="$router.push(`/user/detail/${scope.row.accept_user_id}`)"
                    >
                        <img :src="scope.row.accept_user_avatar" class="square" />
                        {{
                            scope.row.accept_user_name
                        }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="task_title" label="任务标题" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    {{
                        scope.row.title
                    }}
                </template>
            </el-table-column>
            <el-table-column prop="price" label="单价" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <font color="#F30">{{priceFormat( scope.row.amount_actual)}}</font>
                </template>
            </el-table-column>
            <el-table-column prop="time" label="举报时间" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    {{
                        scope.row.report_time ? countTrialDate(scope.row.report_time * 1000) : '-'
                    }}
                </template>
            </el-table-column>
            <el-table-column prop="status" label="状态" :show-overflow-tooltip="true"
                column-key="status"
                :filters="status"
            >
                <template slot-scope="scope">
                    <font color="#a8a8a8" v-if="scope.row.status==0">待处理</font>
                    <font color="#79b749" v-if="scope.row.status==1">派单人胜</font>
                    <font color="#79b749" v-if="scope.row.status==2">接单人胜</font>
                    <font color="#1890ff" v-if="scope.row.status==3">派单人复审</font>
                    <font color="#1890ff" v-if="scope.row.status==4">接单人复审</font>
                    <font color="#1890ff" v-if="scope.row.status==5">双方复审</font>
                    <font color="#ffaa2b" v-if="scope.row.status==6">判平/释放任务</font>
                    <font color="#ffaa2b" v-if="scope.row.status==7">判平/清算任务</font>
                </template>
            </el-table-column>
            <el-table-column prop="btn" label="操作" :show-overflow-tooltip="true">
            <template slot-scope="scope">
                <div class="tableBtn">
                <router-link class="blue" :to="'/task/arbitrationDetail?id='+scope.row.id + '&listPage=' + curPage" v-if="scope.row.status==0">立即处理</router-link>
                <router-link class="blue" :to="'/task/arbitrationDetail?id='+scope.row.id + '&listPage=' + curPage" style="color:#606266!important" v-else>查看</router-link>
                </div>
            </template>
            </el-table-column>
        </el-table>
        <div class="paginationBlock">
            <el-pagination layout="jumper,prev, pager, next,total" 
                :total="listNumsTotal" :page-size="10"
                :current-page.sync="curPage"
                @current-change="changePage"
            >
            </el-pagination>
        </div>
        <el-dialog title="仲裁审批" 
                :visible.sync="handleShow" 
                width="600px" top="100px"
                :close-on-click-modal="false"
                :show-close="false"
            >
                <el-form label-position="top">
                    <el-row :gutter="35">
                        <el-col :span="24" style="margin-top:-10px;">
                            <el-form-item>
                                <el-radio-group
                                    v-model="atPopStatus"
                                    @change="changeAtPopText"
                                >
                                    <el-radio :label="1" class="elradio">派单人胜</el-radio>
                                    <el-radio :label="2" class="elradio">接单人胜</el-radio>
                                    <el-radio :label="3" class="elradio">派单人复审</el-radio>
                                    <el-radio :label="4" class="elradio">接单人复审</el-radio>
                                    <el-radio :label="5" class="elradio">双方复审</el-radio>
                                    <el-radio :label="6" class="elradio">判平/释放任务</el-radio>
                                    <el-radio :label="7" class="elradio">判平/清算任务</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24" style="margin-top:10px;">
                            <el-form-item label="原因">
                                <el-input type="textarea" rows="5" placeholder="请输入内容"
                                    v-model="atPopText"
                                >
                                </el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button
                        @click="handleShow=false"
                    >取 消</el-button>
                    <el-button type="primary" 
                        :loading="dispostBtnLoad"
                        @click="postDisposeArbitrationApi">确 定</el-button>
                </span>
            </el-dialog>
    </div>
</template>

<script>
    import ArbitrationList from './index.js';
    export default ArbitrationList;
</script>
<style lang="scss" scoped>
    .title{
        margin-bottom:25px;
        font-size:21px;
        margin-top:65px;
    }
    .elradio{
        width:calc((100% - 60px) / 3);
        margin-top:25px;
        &:nth-child(3n){
            margin-right:0;
        }
        &:nth-child(1),&:nth-child(2),&:nth-child(3){
            margin-top:10px;
        }
    }
</style>